<template>
  <div :id="id"
       :class="className"
       :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import { parseTime } from '@/utils'
import { fetchList } from '@/api/data'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    tagId:{
      type:String,
    }
  },
  data() {
    return {
      chart: null,
      options: {
        backgroundColor: '#ffffff',
        title: {
          left: '2%',
          top: 20,
          text: '电量统计',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 24,
            color: '#3b319c'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          left: '18%',
          top: 30,
          icon: 'rect',
          type: 'scroll',
          itemWidth: 14,
          itemHeight: 18,
          itemGap: 13,
          data: [],
          // right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#39557b'
          }
        },
        grid: {
          top: 100,
          left: '2%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: null
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(%)',
            min: 1,
            max: 3.8,
            splitNumber: 10,
            // axisTick: {
            //   show: false
            // },
            // splitLine: {
            //   show: false
            // },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            }
            // splitLine: {
            //   lineStyle: {
            //     color: '#57617B'
            //   }
            // }
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
          }
        ],
        series: []
      }
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))

    this.chart.showLoading()

    // setTimeout(() => {
    //   this.initChart()
    // }, 7000)
    // this.timer = setInterval(() => {
    //   this.chart.setOption(this.options)
    //   this.addData()
    // }, 3000)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // this.$api.get('/getTagInfo', null, r => {
    let startTime = new Date()
    // startTime.setMonth(startTime.getMonth() - 1)
    startTime.setDate(startTime.getDate() - 60)
    let query = { startTime: startTime.getTime(), endTime: new Date().getTime() ,tagId:this.id}
    // let query = { startTime: 1584363333123, endTime: 1585563333123 }
    fetchList(query).then(r => {
      console.log(r)
      let timestamps = r.timestamps
      console.log(timestamps)
      // timestamps.forEach(item => {
      //   item=parseTime(item, '{y}-{m}-{d} {h}:{i}:{s}')
      // })
      for (let i = 0; i < timestamps.length; i++) {
        timestamps[i] = parseTime(timestamps[i], '{y}-{m}-{d} {h}:{i}:{s}')
      }
      this.options.xAxis[0].data = timestamps.reverse()
      // this.options.xAxis[0].data = timestamps
      console.log(this.options.xAxis[0].data)
      // r.voltage.forEach(item => {
      //   this.options.legend.data.push(item.id)
      //   this.options.series.push(
      //     this.createSeries(item.id, item.VoltageValue.slice(0, 20000))
      //   )
      // })
      this.options.legend.data.push(this.id)
      console.log(this.id)
      this.options.series.push(this.createSeries(this.id,r.VoltageValue.reverse()))
      this.chart.hideLoading()
      // this.initChart()
      this.chart.setOption(this.options, true)
    })
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(document.getElementById(this.id))
      // this.chart.showLoading()
      this.chart.setOption(this.options, true)
    },
    createSeries(name, data) {
      console.log(data)
      for (let i = 0; i < data.length; i++) {
        if ((data[i] === -1) | (data[i] === 0)) {
          data[i] = null
        }
      }
      let obj = {}
      obj.name = name
      obj.data = data
      obj.type = 'line'
      console.log(obj)
      return obj
    }
    // addData() {
    //   this.$api.get('/getTagInfo', null, r => {
    //     this.options.xAxis[0].data.push(parseTime(r.responseTS, '{h}:{i}:{s}'))
    //     r.tags.forEach((item, index) => {
    //       this.options.series[index].data.push(item.batteryVoltage)
    //     })
    //   })

    //   if (this.options.xAxis[0].data.length >= 13) {
    //     this.options.xAxis[0].data.shift()
    //     this.options.series.forEach(item => {
    //       item.data.shift()
    //     })
    //   }
    // }
  }
}
</script>
